<template>
	<view class="protect">
		<!-- 头部提示 -->
		<text class="tishi">账号维护</text>
		<!-- 内容 -->
		<view class="item">
			<text>修改登录密码</text>
			<view class="phone">
				<text></text>
				<uni-icons type="forward" size="20" color="grey" @click="router('/pages/person/setUp/securityChild/changePssword')"></uni-icons>
			</view>
		</view>
		<view class="item">
			<text>修改绑定手机</text>
			<view class="phone">
				<text>{{phoneNumber(username)}}</text>
				<uni-icons type="forward" size="20" color="grey" @click="router('/pages/person/setUp/securityChild/changePhone')"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: ''
			};
		},
		onShow() {
			const username = getApp().globalData.username
			this.username = username
		},
		methods: {
			// 页面跳转
			router(path) {
				// console.log(path)
				uni.navigateTo({
					url: path
				})
			},
			// 手机号中间4位变*号
			phoneNumber(phoneNumber) {
				let reg = /^1[3456789]{1}\d{9}$/ //必须是以1开头，第二位必须是3-9中的任意一个数，后面9位必须是数字
				//校验手机号是否正确
				if (reg.test(phoneNumber)) {
					phoneNumber = phoneNumber.toString() //先强制转换成字符串类型
					return phoneNumber.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')
				} else {
					return ''
				}
			}
		}
	}
</script>

<style lang="scss">
	.protect {
		width: 100vw;
		height: calc(100vh - 88upx);
		background: rgb(242, 243, 247);
		overflow: hidden;

		.tishi {
			display: block;
			font-size: 26upx;
			padding: 40upx;
			color: rgb(153, 153, 153);
		}

		.item {
			margin: 4upx 0;
			padding: 40upx;
			font-size: 28upx;
			color: grey;
			background: white;
			display: flex;
			justify-content: space-between;

			.phone {
				display: flex;
				align-items: center;

				text {
					margin-right: 20upx;
				}
			}
		}
	}
</style>
